<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../js/jquery-1.12.4.js"></script>
<title>无标题文档</title>
</head>
<body>
<div id="menu">
	 <h2><input type="checkbox" name="role" value="101"/>系统管理</h2>
	 <p>
	 	<input type="checkbox" name="role" value="101001"/>用户管理
	    <input type="checkbox" name="role" value="101002"/>参数管理
	    <input type="checkbox" name="role" value="101003"/>权限管理
	    <input type="checkbox" name="role" value="101004"/>日常管理
	    <input type="checkbox" name="role" value="101005"/>财务管理
	 </p>
	 <hr/>
	 <h2><input type="checkbox" name="role" value="102"/>鲜花订单管理</h2>
	 <p>
	 	<input type="checkbox" name="role" value="102032"/>增加订单
	    <input type="checkbox" name="role" value="102013"/>订单发货
	    <input type="checkbox" name="role" value="102015"/>在线结算
	    <input type="checkbox" name="role" value="102016"/>原料管理 
	 </p>
	 <hr/>
	 <h2><input type="checkbox" name="role" value="103"/>客户管理</h2>
	 <p>
	 	<input type="checkbox" name="role" value="103032"/>增加用户
	    <input type="checkbox" name="role" value="103032"/>查找用户
	    <input type="checkbox" name="role" value="103012"/>用户维护
	    <input type="checkbox" name="role" value="103012"/>生日祝贺
	    <input type="checkbox" name="role" value="103012"/>删除用户
	 </p>
</div>
 <p>
	  <input type="button" value="全选"/>
	  <input type="submit" value="提交"/>
	  <input type="reset" value="重置"/>
 </p>
<hr/>
 <p>
   1:实现  全选 全不选 功能（通过点击 全选 按钮）<br/>
   2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；<br/>
   3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。<br/>
   4：不能采用固定value 的方式，比如$(":checkbox[value=1001]")这样的格式
 </p>
</body>
<script>
  $(function(){
	$("input[value='全选']").click(function(){
		if($(this).val()== "全选"){
			$("#menu input[ type='checkbox']").prop("checked",true);
			 $(this).attr("value","不选");
		} else {
			$("#menu input[ type='checkbox']").prop("checked",false);
			$(this).attr("value","全选");
		}
	});
			
	$("h2 :checkbox").click(function(){
  			$(this).parent().next().children().prop("checked",$(this).prop("checked"));
  	});
  	$("#menu p>input").click(function(){
  		if($(this).prop("checked")){
  			$(this).parent().prev().children().prop("checked",true);
  		} else {
  			$(this).parent().prev().children().prop("checked",false);
  		}
  	});
  
  })
	 
</script>
</html>
